<template>
<nav class="side-nav" ref="sideNav" :draggable="false">
    <div class="side-nav-left" @click="handleChangeSideNavWidth">|||</div>
    <ul 
        class="side-ul" 
        ref="sideUl" 
        @click="handleOpenTheMenu" 
    >
        <!-- 一级菜单 -->
        <li 
            class="side-item-li side-item-li-border" 
            v-for="item in newMenuList" 
            :key="item.id"
            :data-key="item.id"
            :data-open="item.defaultIndex"
            :style="Number(item.defaultIndex)
                ? {height: `${(item.childMenu.length + 1) * 48}px`}
                : {height:'48px'}"
        >
            <div class="side-item-f">
                <img 
                    :src="item.icon" 
                    :class="['item-icon', {'new-item-icon': changeSideNavBool}]" 
                    alt="icon"
                    :title="item.path"
                >
                <h4 :class="['item-title', {'new-item-title': changeSideNavBool}]">
                    {{item.title}}
                    <i class="arrow-top" v-if="item.childMenu"></i>
                </h4>
            </div>
            <ul 
                class="side-ul side-ul-height" 
                v-if="item.childMenu" 
                :style="Number(item.defaultIndex) 
                    ? {height: `${item.childMenu.length * 48}px`}
                    :{height:0}"
            >
                <!-- 二级菜单 -->
                <router-link 
                    class="side-item-li" 
                    v-for="childItem in item.childMenu" 
                    :key="childItem.id"
                    :data-key="childItem.id"
                    tag="li"
                    :to="'/vue-manager'+item.path+childItem.path"
                >
                    <div class="side-item-f new-side-item-left">
                        <img 
                            :src="childItem.icon" 
                            class="item-icon" 
                            alt="icon"
                            :title="childItem.path"
                        >
                        <h4 :class="['item-title', {'new-item-title': changeSideNavBool}]">
                            {{childItem.title}}
                            <i v-if="childItem.childMenu"></i>
                        </h4>
                    </div>
                </router-link>
            </ul>
        </li>
    </ul>
</nav>
</template>

<script>
import { Local, utils } from "../../common"
import { getMenuList } from "../../config/data"
import { ROUTER_ACTIVE } from "../../config/localConstant"
import { messageTip } from '../JS'
export default {
    name: "navLeft",
    data() {
        return {
            changeSideNavBool: false, /* 张开 */
            menuList: [],
            preTime: 0
        }
    },
    created() {
        this.getMenuListData()
    },
    methods: {
        async getMenuListData() {
            let result = await getMenuList()
            this.menuList = this.requireMenuIcon(result.data.menuList)
        },
        requireMenuIcon(menuList) {
            let list = menuList.map(item => {
                item.icon = require("../../assets/logo.png")
                if(item.childMenu) this.requireMenuIcon(item.childMenu)
                return item
            })
            return list;
        },
        handleOpenTheMenu(e) {
            e.stopPropagation()
            if(
                e.target.constructor === HTMLDivElement
                || e.target.constructor === HTMLUListElement
                || e.target.constructor === HTMLLIElement
            ) return;
            // 记录时间，防止点击太快
            let now = Date.now()
            if((now - this.preTime) < 300) {
                messageTip({content: "太快了，受不了啦！！"})
                return; 
            }
            const currNode = e.target.parentNode.parentNode
            if(currNode.children.length === 1) {
                // console.log(Number(currNode.parentNode.parentNode.dataset.open))
                return;
            }
            const menuTwo = currNode.children[1]
            let menuTwoLen = menuTwo.children.length
            let h = 48 * (menuTwoLen+1)

            if(currNode.offsetHeight === h) {
                currNode.dataset.open = 1
            }
            this.preTime = now
            if(Number(currNode.dataset.open)) {
                currNode.style.height = "48px"
                menuTwo.style.height = 0
                currNode.dataset.open = 0
                return;
            }
            currNode.style.height = h + "px"
            menuTwo.style.height = h + "px"
            currNode.dataset.open = 1
        },
        handleChangeSideNavWidth() {
            const chageNavLeftWidth = this.$refs.sideNav
            const nodes =[...this.$refs.sideUl.children]
            this.changeSideNavBool = !this.changeSideNavBool
            if(this.changeSideNavBool) {
                chageNavLeftWidth.style.minWidth = "64px"
                chageNavLeftWidth.style.width = "64px"
                nodes.forEach(node => {
                    node.style.height = "48px"
                    node.children[1].style.height = 0
                    node.dataset.open = 0
                })
            } else {
                chageNavLeftWidth.style.minWidth = "180px"
                chageNavLeftWidth.style.width = "180px"
            }
        },
    },
    computed: {
        newMenuList() {
            let { msg } = Local.get(ROUTER_ACTIVE)
            let path = ""
            if(msg) {
                path = "/" + msg.split("/").splice(2, 1).join("")
            } else {
                this.$router.push({name: 'userList'}).catch(err => err)
                path = "/user-manager"
            }
            let newMenu = this.menuList.map(menu => {
                menu.defaultIndex = 0
                if(path === menu.path) {
                    menu.defaultIndex = 1
                }
                return menu;
            })
            return newMenu;
        }
    },
    watch: {
        "$route.fullPath"(newVal) {
            Local.set(ROUTER_ACTIVE, newVal)
        }
    }
}
</script>

<style scoped>
.side-nav {
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    max-width: 180px;
    width: 180px;
    background-color: #e2e2e2;
    transition: min-width 0.42s, width 0.42s;
    user-select: none;
}
.side-nav::-webkit-scrollbar {
    display: none;
}
.side-nav .side-nav-left {
    height: 38px;
    text-align: center;
    line-height: 38px;
    background-color: #a1a1a1;
    transition: background-color .35s, color .35s;
    cursor: pointer;
}
.side-nav .side-nav-left:hover {
    background-color: #818181;
    color: #ebebeb;
}
.side-nav .side-ul,
.side-nav .side-item-li {
    display: flex;
    flex-direction: column;
}
.side-nav .side-item-li {
    height: 48px;
    line-height: 48px;
    transition: height 0.32s;
}
.side-nav .side-item-li-border {
    border-bottom: 1px solid #000;
}
.side-nav .side-ul-height {
    overflow: hidden;
    height: 0;
    transition: height 0.32s;
}
.side-nav .router-link-active {
    color: red;
    background-color: #91b2c9;
}
.side-item-li .side-item-f {
    display: flex;
    cursor: pointer;
    transition: background-color .32s;
}
.side-item-li .side-item-f:hover {
    background-color: #69afe0;
}
.side-item-li .new-side-item-left {
    padding-left: 14px;
    border-top: 1px solid #8a8a8a;
}
.side-item-li .side-item-f.new-side-item-left:hover {
    background-color: #a2c9e6;
}
.side-item-li .item-icon {
    height: 48px;
    line-height: 48px;
    padding: 14px 4px 14px 12px;
    box-sizing: border-box;
    transition: .16s;
}
.side-item-li .new-item-icon {
    padding-left: 32%;
    transition: padding-left .64s;
}
.side-item-li .item-title {
    position: relative;
    overflow: hidden;
    flex: 1;
    transition: .32s;
    transition-delay: .16s;
    text-overflow: ellipsis;
}
.side-item-li .new-item-title {
    opacity: 0;
    transition: .32s;
}
.side-item-li .item-title .arrow-top::after {
    content: "^";
    position: absolute;
    top: 0;
    right: 10px;
    padding-top: 5px;
    transition: transform 0.32s;
    pointer-events: none;
}
</style>